<!-- 司机详情 -->
<template>
  <div
    class="dashboard-container driver-detail"
    style="height: 100%;"
  >
    <el-card
      style="height:640px;overflow-y:auto;overflow-x:hidden;"
      type="card"
    >
      <el-tabs>
        <el-tab-pane label="基本信息">
          <el-form
            :class=" isEditBase ? '' : 'base-info' "
            inline
            label-width="80px"
            :model="baseInfoForm"
          >
            <el-form-item label="员工编号">
              <div class="inputDeep">
                <el-input
                  v-model="baseInfoForm.userId"
                  disabled
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="司机名称">
              <el-input
                v-model="baseInfoForm.name"
                disabled
              ></el-input>

            </el-form-item>
            <el-form-item label="所属机构">
              <el-input
                v-model="baseInfoForm.agency.name"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item
              label="电话"
            >
              <el-input
                v-model="baseInfoForm.mobile"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input
                v-model="baseInfoForm.age"
                :disabled="isEditBase ? false : true"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="footer-container">
            <div class="baseinfo-container">
              <el-button
                v-if="!isEditBase"
                type="goon"
                @click="EditBaseInfo"
              >编辑</el-button>
              <el-button
                v-if="isEditBase"
                type="goon"
                @click="confBaseInfo"
              >保存</el-button>
              <el-button
                v-if="isEditBase"
                type="goon2"
                @click="cancelBaseInfo"
              >取消</el-button>

            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="驾驶证信息">
          <el-form
            inline
            :class=" isEditDriver ? '' : 'license-info' "
            :model="driversLicenseInfo"
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="驾驶证号">
                  <el-input
                    v-model="driversLicenseInfo.licenseNumber"
                    :disabled="isEditDriver ? false : true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="准驾车型">
                  <el-input
                    v-model="driversLicenseInfo.allowableType"
                    :disabled="isEditDriver ? false : true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="初次领证日期">
                  <el-date-picker
                    v-model="driversLicenseInfo.initialCertificateDate"
                    type="date"
                    placeholder="请选择注册时间"
                    value-format="yyyy-MM-dd"
                    :disabled="isEditDriver ? false : true"
                    @change="changedate"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="驾驶证有效期限">
                  <el-input
                    v-model="driversLicenseInfo.validPeriod"
                    :disabled="isEditDriver ? false : true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾龄">
                  <el-input
                    v-model="driversLicenseInfo.driverAge"
                    :disabled="isEditDriver ? false : true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾驶证类型">
                  <el-input
                    v-model="driversLicenseInfo.licenseType"
                    :disabled="isEditDriver ? false : true"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8"><el-form-item label="从业资格证">
                <el-input
                  v-model="driversLicenseInfo.qualificationCertificate"
                  :disabled="isEditDriver ? false : true"
                ></el-input>
              </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="入场证信息">
                <el-input
                  v-model="driversLicenseInfo.passCertificate"
                  :disabled="isEditDriver ? false : true"
                ></el-input>
              </el-form-item>
              </el-col>
            </el-row>
            <!---------------------------- 图片-------------- -->
            <el-form-item label="图片信息">
              <UploadImage
                class="upload-image"
                :example-list="exampleList"
                :is-show-example-img="isShowExampleImg"
                :prop-image-url="propImageUrl"
                :disabled="disabled"
                @imageChange="getSonPicList"
              ></UploadImage>
            </el-form-item>
          </el-form>
          <div class="btn-container">
            <el-button
              v-if="!isEditDriver"
              type="goon"
              @click="editDrivingLicense"
            >编辑</el-button>
            <el-button
              v-else
              type="goon"
              @click="confDrivingLicense"
            >保存</el-button>
            <el-button
              v-if="isEditDriver"
              type="goon2"
              @click="handleCancle"
            >
              取消
            </el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { getDriverBaseInfo, getDriversLicenseInformation, saveDriverInfo, saveLicenscInfo } from '@/api/transit'
// import COS from 'cos-js-sdk-v5'
import UploadImage from '@/components/UploadImage'
export default {
  name: 'DriverDetail',
  components: {
    UploadImage
  },
  data() {
    return {
      maxNum: 2,
      imgUrlList: [], // 图片地址
      isEditBase: false, // 基础信息 编辑按钮的开关变量
      isEditDriver: false, // 驾驶证信息开关变量
      id: null,
      date: '',
      baseInfoForm: {
        age: null,
        mobile: '',
        name: '',
        userId: null,
        agency: {
          name: ''
        }
      },
      driversLicenseInfo: {
        id: this.id,
        licenseNumber: null, // 驾驶证号
        allowableType: '', // 准驾车型
        initialCertificateDate: '', // 初次领证日期
        validPeriod: null, // 驾驶证有效期限
        driverAge: null, // 驾龄
        licenseType: '', // 驾驶证类型
        qualificationCertificate: '', // 从业资格证信息
        passCertificate: '', // 入场证信息
        picture: [] // 图片信息
      },
      dialogImageUrl: '',
      dialogVisible: false,
      isLoading: false,
      // 使用组件
      propImageUrl: [],
      exampleList: [],
      disabled: false,
      isShowExampleImg: true,
      // 最后一步
      theLastArr: []

    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDriverBaseInof(this.id)
    this.getDriversLicenseInformation(this.id)
  },
  methods: {
    /**
     * 获取司机基本信息
    */
    async getDriverBaseInof(id) {
      // console.log('司机id', id)
      const { data } = await getDriverBaseInfo(id)
      this.baseInfoForm = data
    },
    /**
     * 获取驾驶证基本信息
    */
    async getDriversLicenseInformation(id) {
      // console.log('驾驶证', id)
      const res = await getDriversLicenseInformation(id)
      this.driversLicenseInfo = res.data
      this.exampleList = this.translate(this.driversLicenseInfo.picture)
      this.imgUrlList = this.translate(this.driversLicenseInfo.picture)
      this.propImageUrl = this.translate(this.driversLicenseInfo.picture)
      // console.log(this.driversLicenseInfo)
    },
    // 基本信息按钮
    EditBaseInfo() {
      this.isEditBase = true
    },
    async confBaseInfo() {
      this.isEditBase = false
      // console.log(this.baseInfoForm)
      const data = {
        age: this.baseInfoForm.age,
        avatar: '',
        mobile: this.baseInfoForm.mobile,
        name: this.baseInfoForm.name,
        userId: this.id,
        workNumber: this.baseInfoForm.account,
        workStatus: this.baseInfoForm.workStatus
      }
      await saveDriverInfo(this.id, data)
      this.$message.success('保存成功')
    },
    cancelBaseInfo () {
      this.isEditBase = false
    },
    // 驾驶证信息按钮
    editDrivingLicense () {
      this.isEditDriver = true
      this.isShowExampleImg = false
      this.disabled = false
    },
    // 确定更改司机详情
    confDrivingLicense () {
      // 上传头像 获得返回的图片地址 将得到的地址拼接后返回到表单
      // 提交表单
      const theLastStr = this.theLastArr.map(item => item.response.data).toString()

      this.driversLicenseInfo.picture = theLastStr

      if (!this.driversLicenseInfo.picture.includes(',')) {
        this.$message.error('请至少上传两张图片')
        return
      }
      this.saveLicenscInfo(this.driversLicenseInfo)
      this.isEditDriver = false
      this.exampleList = this.theLastArr.map(item => item.response.data)
    },
    // 取消
    handleCancle() {
      this.isShowExampleImg = true
      this.isEditDriver = false
      this.disabled = true
    },
    changedate() {
      // console.log(this.driversLicenseInfo)
    },
    async saveLicenscInfo(data) {
      const res = await saveLicenscInfo(data)
      if (res.code === 200) {
        this.$message.success('保存成功')
      }
    },
    handleRemove(file) {
      // console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传前文件校验
    // beforeAvatarUpload(file) {
    //   const fileTypeList = ['image/jpeg', 'iamge/bmp', 'image/png']
    //   const isLt5M = file.size / 1024 / 1024 < 5
    //   if (!isLt5M) {
    //     this.$message.error('不支持当前文件格式')
    //   }
    //   if (fileTypeList.includes(file.type)) {
    //     // 发送请求
    //     this.isLoading = true
    //     this.upLoadImage(file)
    //   } else {
    //     this.$message.error('上传头像图片只能是 JPG PNG GIF BMP 格式!')
    //   }
    // },
    // async upLoadImage(params) {
    //   const cos = new COS({
    //     SecretId: 'AKID2tZ1iJi4KNGwOcdgSyFTM7dvAJEvQsAE',
    //     SecretKey: 'wvmcVItJYfaYbt22CEC76RdgWI95ubCo'
    //   })
    //   await cos.putObject(
    //     {
    //       Bucket: 'shenlingwuliu-1318882557', // 存储桶名称
    //       Region: 'ap-beijing', // 地域名称
    //       Key: params.name, // 文件名称
    //       StorageClass: 'STANDARD', // 固定值
    //       Body: params // 文件对象
    //     },
    //     (err, data) => {
    //       if (data.statusCode === 200 && data.Location) {
    //         // 拿到了腾讯云返回的地址
    //         // console.log(this.imgUrlList)
    //         this.imgUrlList.unshift('http://' + data.Location)
    //         this.driversLicenseInfo.picture = this.imgUrlList.slice(0, 2).toString()
    //         this.isLoading = false
    //         this.$message.success('上传完成')
    //       } else {
    //         this.$message.error(err.Message) // 上传失败提示消息
    //         this.isLoading = false
    //       }
    //     }
    //   )
    // },
    // 处理图片地址
    translate(str) {
      let newarr = []
      if (str === null) {
        return newarr
      } else if (str.includes(',')) {
        newarr = str.split(',')
        return newarr
      } else {
        return newarr.push(str)
      }
    },
    getSonPicList(val) {
      this.theLastArr = val
      // const valList = val.map(item => item.response.data)
      // console.log(valList)
    }

  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 36px 18px;
  height: 100%;
  .el-card {
    height: 100%;
  }
}
.el-input {
  width: 240px;
}
.dashboard-container {
  height: 100%;
  .el-card {
    height: 100%;
    .el-tabs {
      .span {
        display: inline-block;
        width: 280px;
      }
    }
  }
}
.base-info ::v-deep .el-input__inner {
  border: 0;
  background-color: #ffffff;
}
.license-info ::v-deep .el-input__inner {
  border: 0;
  background-color: #ffffff;
}
.upload ::v-deep .el-upload {
  width: 220px;
  height: 160px;
}
.image-box {
  display: flex;
  justify-content: space-between;
  width: 460px;
  height: 160px;
  .item-container {
    position: relative;
    .item {
      position: absolute;
      width: 220px;
      height: 160px;
      background-color: rgba($color: #00000007, $alpha: 0.3);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      span {
        img {
          width: 35px;
          height: 35px;
        }
      }
    }
    .item :hover {
      visibility: visible;
    }
  }
}
 ::v-deep .el-tabs__item.is-active {
  font-size: 16px;
  font-weight: 800;
  color: #20232a;
  }
  ::v-deep .el-tabs__item:hover {
    color: #20232a;
  }
   ::v-deep .el-tabs__nav-wrap::after {
    height: .5;
   }
  ::v-deep .el-tabs__active-bar {
    background-color: #e15536;
  }
  .el-button--goon:focus,
.el-button--goon:hover {
  background: #ffab98;
  border-color: #ffab98;
  color: #fff;
}

.el-button--goon {
  color: #FFF;
  background-color: #e15536;
  border-color: #e15536;
}
.el-button--goon2:focus,
.el-button--goon2:hover {
  background: #ffeeeb;
  border-color: #e15536;
  color: #e15536;
}

.el-button--goon2 {
  background-color: #fff;
  border-color: #ccc;
}
.baseinfo-container {
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}
.footer-container {
  height: 400px;
  background-color: #fff;
}
.upload-image {
  margin-bottom: 60px;
}
.btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
